<template>
  <div class="expire_container">
    <div class="header">
      <p>归还图书</p>
    </div>
    <div class="banner">
      <div class="expireDays">
        <p>还剩{{ expireInfo.expireDays }}天</p>
      </div>
      <div class="bookNumber">
        <el-input v-model="BookId" :readonly="true" size="large">
          <template #prepend>图书编号</template>
        </el-input>
      </div>
      <!-- <div class="closeDate">
        <el-input v-model="expireInfo.closeDate" :readonly="true" size="large">
          <template #prepend>截止日期</template>
        </el-input>
      </div> -->

      <div class="violationMsg">
        <el-input
          v-model="returnInfo.violationMessage"
          placeholder="若无违章信息,则不填"
          size="large"
        >
          <template #prepend>违章信息</template>
        </el-input>
      </div>
      <!-- <div class="adminId">
        <!-- <el-input v-model="expireInfo.bookAdminId" :readonly="true" size="large">
          <template #prepend>管理员编号</template>
        </el-input> 
      </div> -->
      <div class="returnDate">
        <el-date-picker
          v-model="returnInfo.returnDate"
          type="datetime"
          placeholder="选择日期和时间"
          size="large"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="YYYY-MM-DD h:m:s"
        />
      </div>
      <div class="return_button">
        <el-button type="warning" @click="returnBook">归还</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { getReturn, ReturnBook } from "../../api/api";
import { useRoute } from "vue-router";
const router = useRoute();
// let BookId = route.query.BookId;
const BookId = router.params.bookId; // 获取 BookId

const returnInfo = reactive({
  returnDate: "",
  //是否有违规信息
  violationMessage: "",
  bookNumber: 0,
  cardNumber: 0,
});
const expireInfo = reactive({
  expireDays: 0,
  bookNumber: 0,
  closeDate: "",
  bookAdminId: 0,
});

onMounted(() => {
  getExpireInfo();
});

//查询图书是否逾期
const getExpireInfo = () => {
  console.log(BookId);
  getReturn(BookId)
    .then(res => {
      // expireInfo = res.data;
      // console.log(expireInfo, "111");
      ElMessage({
        message: "图书未逾期",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("图书逾期");
    });
};
const returnBook = () => {
  // // 对表单参数进行校验
  if (returnInfo.returnDate === "") {
    ElMessage.error("还书时间不能为空");
    return;
  }
  returnInfo.bookNumber = BookId;
  ReturnBook(returnInfo)
    .then(res => {
      // expireInfo = res.data;
      // console.log(expireInfo, "111");
      router.push({ name: Return });
      ElMessage({
        message: "还书成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("还书失败");
    });
};
</script>

<style lang="less" scoped>
.header {
  text-align: center;
  height: 100px;
  // background-color: pink;
  p {
    font-size: 30px;
    line-height: 100px;
  }
}
.banner {
  height: 680px;
  // background-color:brown;
  display: flex;
  flex-direction: column;
  align-items: center;

  .expireDays {
    margin-top: 20px;
    width: 700px;
    height: 100px;
    border: 2px solid #ccc;
    text-align: center;
    p {
      line-height: 100px;
      font-size: 24px;
    }
  }
  div:nth-child(n + 2) {
    margin-top: 25px;
  }
}
</style>
